<template>
	<!-- 背景图片 -->
	<view class="container">
		<!-- logo -->
		<view class="logo">
		</view>
		<!-- 登录框 -->
		<view class="login">
			<!-- 手机号登录/注册 -->
			<view style="width: 100%;height: 11vh;text-align: center;">
				<span style="line-height: 16vh;font-size: 28px;font-weight: 500;color: rgba(59, 59, 59, 1);"
					@click="code()">手机号登陆/注册</span>
			</view>
			<!-- 手机号 -->
			<view style="width: 81%;height: 10.7vh;margin: 0 auto;border-bottom: 1px solid rgba(110, 231, 240, 1);">
				<view style="width: 100%;height: 5vh;">

				</view>
				<view style="width: 2vh;height: 5vh;float: left;">

				</view>
				<view style="width: 4vh;height: 4vh;float: left;">
					<image src="@/static/手机.png" class="img1"></image>
				</view>
				<view style="width: 80%;height: 6vh;float: left;">
					<u-input class="input1" v-model="value" :type="type" :border="border" placeholder="请输入手机号"
						@blur="onPhoneNumberInput" fontSize="18px" />
				</view>
				<u-popup :show="show" :round="10" mode="center" @close="close" @open="open">
					<view>
						<u-input class="input1" v-model="invitationCode" :type="type" :border="border"
							placeholder="请输入教练邀请码" />
						<u-button @tap="success()" size="small" type="primary" plain hairline
							style="width:20rpx">确定</u-button>
						<u-button @tap="error()" size="small" type="primary" plain hairline
							style="width:20rpx">取消</u-button>
					</view>
				</u-popup>
			</view>
			<!-- 验证码 -->
			<view style="width: 81%;height: 10.7vh;margin: 0 auto;">
				<view style="width: 60%;height: 100%;float: left;border-bottom: 1px solid rgba(110, 231, 240, 1);">
					<view style="width: 100%;height: 5vh;">
					</view>
					<view style="width: 2vh;height: 5vh;float: left;">
					</view>
					<view style="width: 4vh;height: 4vh;float: left;">
						<image src="@/static/验证码.png" class="img1"></image>
					</view>
					<view style="width: 61%;height: 6vh;float: left;">
						<u-input class="input1" v-model="values" :type="type" :border="border" placeholder="请输入验证码"
							fontSize="18px" />
					</view>
				</view>
				<view style="width: 40%;height: 43%;float: left;margin-top: 68rpx;">
					<view class="wrap" style="width:200rpx;float: right;padding-top:-250rpx">
						<u-toast ref="uToast"></u-toast>
						<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code> 
						<u-button @tap="getCode" size="large" type="primary" plain hairline>{{tips}}</u-button>
					</view>
				</view>

			</view>
			<!-- 登录按钮 -->
			<view style="width: 100%;height: 6vh;"></view>
			<view @click="login()"
				style="width: 40%;height: 8vh;margin: 0 auto;background: linear-gradient(133.73deg, rgba(110, 231, 240, 1) 0%, rgba(173, 242, 247, 1) 100%);border-radius: 15px;text-align: center;">
				<span style="color: rgba(250, 250, 250, 1);font-size: 24px;font-weight: 500;line-height: 8vh;">登录</span>
			</view>
			<view style="width: 100%;height: 6vh;"></view>
			<!-- 用户服务协议、用户隐私政策 -->
			<view style="width: 81%;height: 10vh;margin: 0 auto;">
				<view style="width: 10%;height: 100%;float: left;">
					<u-radio-group>
						<u-radio>

						</u-radio>
					</u-radio-group>
				</view>
				<view style="width: 90%;height: 100%;float: left;">
					<span style="font-size: 16px;font-weight: 500;color: rgba(117, 117, 117, 1);">我已阅读并同意</span>
					<span style="font-size: 16px;font-weight: 500;color: rgba(255, 141, 26, 1);">《用户服务协议》</span>
					<span style="font-size: 16px;font-weight: 500;color: rgba(117, 117, 117, 1);">、</span>
					<span style="font-size: 16px;font-weight: 500;color: rgba(255, 141, 26, 1);">《隐私政策》</span>
					<span style="font-size: 16px;font-weight: 500;color: rgba(117, 117, 117, 1);">等协议</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: "",
				userInfo: {},
				show: false,
				invitationCode: '',
				value: '',
				values: '',
				type: 'text',
				border: true,
				// values: 'orange',
				tips: '',
				// refCode: null,
				seconds: 60,
				timer: null, // 添加这一行
			}
		},
		onReady() {
			this.refCode = this.$refs.uCode
		},
		onShow() {
			// wx.scanQRCode({
			//   needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
			//   scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
			//   success: function (res) {
			//     var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
			//   }
			// });
			uni.request({
				url: 'http://127.0.0.1:17000/Login/getToken',
				method: "GET",
				success: (res) => {
					if (res.data.data == 1) {
						uni.switchTab({
							url: '/pages/student/index/index'
						})
					}
				}
			})
		},
		methods: {
			success() {
				if (this.userInfo.invitationCode != "" && this.userInfo.invitationCode != null) {
					this.invitationCode = this.userInfo.invitationCode
				}
				this.userInfo = uni.getStorageSync('userInfo')
				uni.request({
					url: "http://127.0.0.1:17000/CoachManagement/getCoachId",
					method: "GET",
					data: {
						coachCode: this.invitationCode,
					},
					success: (res) => {
						if (res.data.code == 200) {
							if (res.data.data.data) {
								this.userInfo = uni.getStorageSync('userInfo')
								this.userInfo.invitationCode = this.invitationCode
								uni.setStorageSync('coach', res.data.data.data.id)
								this.userInfo.invitationCode = this.invitationCode
								uni.setStorageSync('userInfo', this.userInfo)
								if (this.userInfo.memberUserSex == null) {
									uni.navigateTo({
										url: '/pages/student/chooseLabel/sex',
										animationType: 'slide-out-top',
										animationDuration: 200
									})
								} else if (!this.userInfo.memberUserAge) {
									uni.navigateTo({
										url: '/pages/student/chooseLabel/age',
										animationType: 'slide-out-top',
										animationDuration: 200
									})
								} else if (!this.userInfo.memberUserWeight) {
									uni.navigateTo({
										url: '/pages/student/chooseLabel/weight',
										animationType: 'slide-out-top',
										animationDuration: 200
									})
								} else if (!this.userInfo.memberUserHeight) {
									uni.navigateTo({
										url: '/pages/student/chooseLabel/bodyHeight',
										animationType: 'slide-out-top',
										animationDuration: 200
									})
								} else {
									uni.request({
										url: "http://127.0.0.1:17000/plan/selectPlanById",
										method: "get",
										data: {
											memberId: this.userInfo.id
										},
										success: (res) => {
											if (res.data.code == 200) {
												console.log(res.data.data.data == null)
												if (res.data.data.data != null) {
													uni.navigateTo({
														url: '/pages/student/chooseLabel/welcome',
														animationType: 'slide-out-top',
														animationDuration: 200
													});
												} else {
													uni.navigateTo({
														url: '/pages/student/chooseLabel/motion',
														animationType: 'slide-out-top',
														animationDuration: 200
													})
												}
											}
										}
									})
								}
							} else {
								uni.showToast({
									title: '请输入有效的教练邀请码',
									icon: 'none',
									duration: 2000
								})
							}
						}
					}
				})
			},
			onPhoneNumberInput: function() {
				if (this.value.length === 11) {
					this.phone = this.value
				} else {
					uni.showToast({
						title: '请输入正确的手号',
						icon: 'none',
						duration: 2000
					})
				}
			},
			// validatePhoneNumber: function() {
			// 	// 模拟验证手机号是否存在的操作
			// 	// 在实际应用中，这里可能会涉及到异步请求，例如使用 Axios 发送到服务器进行验证
			// 	// 这里使用简单的字符串比较来模拟
			// 	uni.request({
			// 		url: "http://127.0.0.1:17000/memberUser/selectByPhoneOnly",
			// 		method: "GET",
			// 		data: {
			// 			phone: this.value,
			// 		},
			// 		success: (res) => {
			// 			if (res.data.code == 200) {
			// 				this.userInfo = res.data.data.data[0]
			// 				if (this.userInfo != undefined) {
			// 					this.phone = "1"
			// 					console.log(this.userInfo)
			// 					uni.setStorageSync('userInfo', this.userInfo)
			// 				} else {
			// 					this.phone = "1"
			// 					uni.showToast({
			// 						title: '请输入有效的手机号',
			// 						icon: 'none',
			// 						duration: 2000
			// 					})
			// 				}
			// 			}
			// 		},
			// 	})
			// 	// const existingPhoneNumbers = ["1234567890", "9876543210", "5555555555"];
			// 	// if(!existingPhoneNumbers.includes(this.value)){
			// 	// 	this.noPhoneNumberExists=true
			// 	// }
			// },
			open() {

				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			login() {
				uni.request({
					url: 'http://127.0.0.1:17000/Login/memberLoginByPhone',
					data: {
						phone: this.value,
						code: this.values
					},
					success: (res) => {
						if (res.data.code == 200) {
							uni.setStorageSync('identify', 'Student')
							this.userInfo = res.data.data
							uni.setStorageSync('userInfo', res.data.data)
							if (this.userInfo.invitationCode != "" && this.userInfo.invitationCode != null) {
								console.log("1")
								// 查询教练数据
								this.selectCoachByInvitationCode(); 
							} else {
								console.log("2")
								// 查询申请数据
								//this.selectCoachApplyByInvitationCode();
								if (this.userInfo.memberUserSex == null) {
									uni.navigateTo({
										url: '/pages/student/chooseLabel/sex',
										animationType: 'slide-out-top',
										animationDuration: 200
									})
								} else if (!this.userInfo.memberUserAge) {
									uni.navigateTo({
										url: '/pages/student/chooseLabel/age',
										animationType: 'slide-out-top',
										animationDuration: 200
									})
								} else if (!this.userInfo.memberUserWeight) {
									uni.navigateTo({
										url: '/pages/student/chooseLabel/weight',
										animationType: 'slide-out-top',
										animationDuration: 200
									})
								} else if (!this.userInfo.memberUserHeight) {
									uni.navigateTo({
										url: '/pages/student/chooseLabel/bodyHeight',
										animationType: 'slide-out-top',
										animationDuration: 200
									})
								}else{
									uni.navigateTo({
										url: '/pages/student/index/index',
										animationType: 'slide-out-top',
										animationDuration: 200
									})
								}
							}
						} else {
							uni.showToast({
								title: '验证码错误，请重新输入',
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			},

			selectCoachByInvitationCode() {
				uni.request({
					url: 'http://127.0.0.1:17000/memberUser/selectCoachByInvitationCode',
					method: "GET",
					data: {
						invitationCode: uni.getStorageSync('userInfo').invitationCode,
						venueUniqueIdentifier: uni.getStorageSync('userInfo').venueUniqueIdentifier
					},
					success: (res) => {
						uni.setStorageSync('coach', res.data.data.data.id);
						uni.navigateTo({
							url: '/pages/student/chooseLabel/welcome',
							animationType: 'slide-out-top',
							animationDuration: 200
						});
					}
				});
			},

			selectCoachApplyByInvitationCode() {
				uni.request({
					url: 'http://127.0.0.1:17000/memberUser/selectCoachApplyByInvitationCode',
					method: "GET",
					data: {
						memberUserId: uni.getStorageSync('userInfo').id,
						invitationCode: uni.getStorageSync('userInfo').invitationCode,
						venueUniqueIdentifier: uni.getStorageSync('userInfo').venueUniqueIdentifier
					},
					success: (res) => {
						if (res.data.data.data === null) {
							console.log("null 触发成功");
							uni.redirectTo({
								url: '/pages/student/index/chooseCoach'
							});
						} else {
							if (res.data.data.data.applyStatus === 0) {
								this.$globalBus.startTimer();
								uni.navigateTo({
									url: '/pages/student/chooseLabel/welcome',
									animationType: 'slide-out-top',
									animationDuration: 200
								});
							} else if (res.data.data.data.applyStatus === 1) {
								this.userInfo = uni.getStorageSync('userInfo');
								this.userInfo.invitationCode = res.data.data.data.invitationCode;
								uni.setStorageSync('userInfo', this.userInfo);
								uni.setStorageSync('userInfo', userInfo);
								this.selectCoachByInvitationCode();
							}
						}
					}
				});
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(this.phone.length!=11){
					uni.$u.toast('请输入正确的手机号');
				}else{
					if (this.$refs.uCode.canGetCode) {
						// uni.showLoading({
						// 	title: '正在获取验证码'
						// })
						// 向后端请求验证码
						uni.request({
							url: "http://127.0.0.1:17000/Login/sendPhoneCode",
							method: "GET",
							data: {
								phone: this.value,
							},
							success: (res) => {
								if (res.data.code == 200) {
									setTimeout(() => {
										uni.hideLoading();
										// 这里此提示会被this.start()方法中的提示覆盖
										uni.$u.toast('验证码已发送');
										// 通知验证码组件内部开始倒计时
										this.$refs.uCode.start();
									}, 1000);
								}else{
									uni.$u.toast('验证码发送失败');
								}
							},
						});
					} else {
						uni.$u.toast(this.tips);
					}
				}
				
			},
			end() {
				// uni.$u.toast('倒计时结束');
			},
			start() {
				//uni.$u.toast('倒计时开始');
			}
		},
	}
</script>

<style>
	.wrap {
		padding: 24rpx;
	}

	/* 设置背景图片 */
	.container {
		/* display: flex; */
		justify-content: center;
		align-items: center;
		height: 100vh;
		/* background: blue; */
		background-image: url("https://img.js.design/assets/img/625aea28bd06c1a5e27ed094.png");
		background-size: cover;
	}

	.logo {
		width: 100vw;
		height: 24vh;
		/* background-color: red; */
	}

	.login {
		width: 100vw;
		height: 76vh;
		background-color: rgba(255, 255, 255, 0.93);
		border-top-left-radius: 40px;
		border-top-right-radius: 40px;
	}

	.img1 {
		width: 100%;
		height: 100%;
	}

	.input1 {
		width: 100%;
		height: 100%;
	}

	.input1::placeholder {
		font-size: 24px;
		/* 设置预设文本的字体大小 */
	}
</style>